<template>
    <div class="showpic">
       <slot name="close"></slot>
       <div class="showpic-box">
            <div class="swiper-container gallery-top">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in imglist" :key="index" :style="{'background-image':'url('+item+')'}"></div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>
            </div>
            <div class="swiper-container gallery-thumbs">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in imglist" :key="index" :style="{'background-image':'url('+item+')'}"></div>
                </div>
            </div>
       </div>
    </div>
</template>


<script>
export default {
    props:{
        value:{
            type:Boolean,
            default:false
        },
        imglist:{
            type:Array,
            default:[],
        }
    },
    watch:{
        value(){
            if(!this.value) return false;
            this.swiperfn();
        }
    },
    mounted(){
        
    },
    methods:{
        swiperfn(){
            var galleryThumbs = new Swiper.default('.gallery-thumbs', {
                spaceBetween: 8,
                slidesPerView: 5,
                loop: true,
                freeMode: true,
                loopedSlides: 4, //looped slides should be the same
                watchSlidesVisibility: true,
                watchSlidesProgress: true,
            });
            var galleryTop = new Swiper.default('.gallery-top', {
                spaceBetween: 8,
                loop:true,
                loopedSlides: 4, //looped slides should be the same
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                thumbs: {
                    swiper: galleryThumbs,
                },
            });
        }
    }
}
</script>

<style lang="less">
.showpic{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    background:#000;
    .showpic-box{
        width:1200px;
        height:80%;
        margin:0 auto;
        margin-top:5%;
    }
}
.swiper-container {
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
}
.swiper-slide {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    img{
        width:100%;
    }
}
.gallery-top {
    height: 80%;
    width: 100%;
}
.gallery-thumbs {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
}
.gallery-thumbs .swiper-slide {
    height: 100%;
    opacity: 0.4;
}
.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

</style>


